<!DOCTYPE html>
<html lang="en" layout:decorator="common/contentLayout"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<!--页面内容 继承自common/contentLayout.html-->
<div layout:fragment="content">


    <form class="layui-form" id="queryForm">
        <div class="layui-form-item layui-inline">

            <div class="layui-inline">
                <label class="layui-form-label">消息主题：</label>

                <div class="layui-input-block" style="width: 300px">
                    <select lay-ignore id="topicName" name="name" required lay-verType="consumerGroupSelect" lay-verify="required" class="layui-input">
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">ID：</label>
                <div class="layui-input-inline">
                    <input type="number" value="" id="topicId" name="id" class="layui-input search_input"/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">负责人*</label>
                <div class="layui-input-block" style="width: 180px">
                    <select lay-ignore id="ownerIds" required lay-verType="tips" lay-verify="required" class="layui-input">
                    </select>
                </div>

            </div>

            <div class="layui-inline">
                <label class="layui-form-label">topic类型：</label>
                <div class="layui-input-inline" style="width: 150px">
                    <select id="topicType" lay-verify="">
                        <option value="">请选择topic类型</option>
                        <option value ="1">正常topic</option>
                        <option value ="2">失败topic</option>
                    </select>
                </div>
            </div>

            <a class="layui-btn" id="topicSearchList_btn" lay-filter="topicSearchFilter"><i class="layui-icon">&#xe615;</i>查询</a>
        </div>
        <input type="hidden" id="userName" th:value="${userName}"/>
        <input type="hidden" id="userId" th:value="${userId}"/>
    </form>


    <table id="topicTable" class="layui-table" lay-data="{height:'full', page:true,limit: 10, id:'topicTable',toolbar:'#toolbarDemo'}" lay-filter="topicTable">
        <thead>
        <tr>
            <th lay-data="{field: 'id', align: 'center', sort: true, width:'6%', templet: '#idTpl',fixed:'left'}">ID</th>
            <th lay-data="{field: 'appId', align: 'center',sort: true, width:'8%',fixed:'left'}">AppId</th>
            <th lay-data="{field: 'name', align: 'center',sort: true, width:'20%',fixed:'left'}">topic名称</th>
            <th lay-data="{field: 'ownerNames', align: 'center',sort: true, width:'10%'}">负责人</th>
            <th lay-data="{field: 'expectDayCount', align: 'center', width:'9%'}">预期每日数量(万条)</th>
            <th lay-data="{field: 'saveDayNum', align: 'center', width:'6%'}">保留天数</th>
            <th lay-data="{field: 'topicType',align: 'center', templet:'#topicTypeTpl', width:'6%'}">队列类型</th>
            <th lay-data="{field: 'maxLag',align: 'center', width:'6%'}">告警阈值</th>
            <th lay-data="{field: 'queueCount',align: 'center', width:'6%'}">队列数量</th>
            <th lay-data="{field: 'token',align: 'center', width:'4%', templet:'#tokenTpl'}">token</th>
            <th lay-data="{field: 'consumerFlag',align: 'center', width:'6%', templet:'#consumerFlagTpl'}">授权所有</th>
            <th lay-data="{field: 'consumerGroupNames',align: 'center', width:'8%'}">授权订阅的组</th>
            <th lay-data="{field: 'insertTime',align: 'center', width:'10%'}">创建时间</th>
            <th lay-data="{field: 'remark',align: 'center', width:'10%'}">备注</th>
            <th lay-data="{fixed: 'right', align:'center', width:410, toolbar: '#ctrlBar'}">操作区</th>

        </tr>
        </thead>
    </table>

    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">使用说明</h2>
            <div class="layui-colla-content">
                <p>队列分配时 1.会尽量保证将topic分配至各个节点上  2.会尽量保证各个节点上的队列使用达到一个均衡态。因此流程如下:</p>
                <p>1. 寻找所有可用数据节点</p>
                <p>2. 过滤已被分配的节点</p>
                <p>3. 过滤后节点作为待分配节点；若过滤后无节点，说明topic已分配至所有节点，那么直接用可用节点作为待分配节点</p>
                <p>4. 将待分配节点按[未分配量]从高到低排序</p>
                <p>5. 从待分配节点按顺序各取1个队列 分配给topic</p>
                <p>6. 若不够分配 则重复上述过程</p>
            </div>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title warn1">
        <p>"无操作权限，联系topic负责人。让topic负责人，把你添加为负责人即可！"</p>
    </fieldset>

    <div style="display: none">
        <div id="createTopicFormDiv">
            <form th:include="topic/createTopicForm::createTopicForm" class="layui-form" id="createTopicForm" action=""  ></form>
        </div>
    </div>
</div>

<div layout:fragment="end-load-files">
    <script th:src="@{/js/topicList.js}"></script>
    <script th:src="@{/js/searchSelect.js}"></script>
    <script type="text/html" id="idTpl">
        <a href onclick="return false" ><img src="/images/log.png"  data-id="{{= d.id }}"
                                          class="logSearch"/></a>&nbsp;&nbsp;{{= d.id }}
    </script>
    <script type="text/html" id="topicTypeTpl">
        {{# if (d.topicType == 1) { }}
        <label><span class="layui-badge layui-bg-green">正常</span></label>
        {{# } else { }}
        <label><span class="layui-badge">失败</span></label>
        {{# } }}
    </script>
    <script type="text/html" id="tokenTpl">
        {{# if (d.role <= 1) { }}
            {{= d.token }}
        {{# } else { }}
        无权限
        {{# } }}
    </script>
    <script type="text/html" id="consumerFlagTpl">
        {{# if (d.consumerFlag == 1) { }}
        是
        {{# } else { }}
        否
        {{# } }}
    </script>
    <script type="text/html" id="ctrlBar">
        {{# if (d.role == 0) { }}
            {{# if (d.topicType == 1) { }}
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-xs" lay-event="expand"><i class="layui-icon">&#xe619;</i>扩容</a>
                <a class="layui-btn layui-btn-xs" lay-event="reduce"><i class="layui-icon">&#xe61a;</i>缩容</a>
            </div>
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editSaveDayNum">保留天数</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="generateToken">生成token</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="clearToken">清除token</a>
            </div>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteTopic">删除</a>
            {{# }else{ }}
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-xs" lay-event="expand"><i class="layui-icon">&#xe619;</i>扩容</a>
                <a class="layui-btn layui-btn-xs" lay-event="reduce"><i class="layui-icon">&#xe61a;</i>缩容</a>
            </div>
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editSaveDayNum">保留天数</a>
            </div>
            {{# } }}
        {{# } else if (d.role == 1) { }}
            {{# if (d.topicType == 1) { }}
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-xs" lay-event="expand"><i class="layui-icon">&#xe619;</i>扩容</a>
            </div>
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="generateToken">生成token</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="clearToken">清除token</a>
            </div>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteTopic">删除</a>
            {{# }else{ }}
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-xs" lay-event="expand"><i class="layui-icon">&#xe619;</i>扩容</a>
            </div>
            {{# } }}
        {{# } else{ }}
            无权限
        {{# } }}
    </script>

    <script type="text/html" id="toolbarDemo">
        <a class="layui-btn topicSearchList_btn" id="createTopic"><i class="layui-icon">&#xe608;</i>创建</a>
    </script>
    <style type="text/css">
        .warn1 {
            color: red;
            font-size: large;
            font-weight: bold;
        }
        .saveDayNumForm dl {
            height: 120px;
        }
    </style>

    <style type="text/css">
        .layui-input2 {
            height: 38px;
            line-height: 1.3;
            line-height: 38px\9;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
        }
    </style>
</div>
</html>
